<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <script src="./js/vue.min.js"></script>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        #app {
            /*border: 1px dashed black;*/
            width: 100%;
            height: 100vh;
            box-sizing: border-box;
            display: flex;
        }

        .left {
            display: flex;
            flex-direction: column;
            width: 100px;
            border: 1px dashed black;
        }

        .right {
            width: calc(100% - 100px);
            position: relative;
        }

        iframe {
            position: absolute;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        button {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="left">
        <button v-for="(item,index) in list" :key="index" @click="change(index)">{{item.name}}</button>
    </div>
    <div id="container" class="right">
        <!--<iframe :style="{visibility: item.show ? 'visible': 'hidden'}"
                width="100%"
                height="100%"
                :src="item.src"
                frameborder="0"
                v-for="(item) in list"></iframe>-->
    </div>
</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            list: [
                {
                    id: 'menu1',
                    name: '菜单一',
                    src: './menu1.html',
                    show: true
                },
                {
                    id: 'menu2',
                    name: '菜单二',
                    src: './menu2.html',
                    show: false
                },
                {
                    id: 'menu3',
                    name: '菜单三',
                    src: './menu3.html',
                    show: false
                },
            ]
        },
        methods: {
            change(index) {
                /*this.list.forEach(item => item.show = false)
                this.list[index].show = true*/
                const container = document.getElementById('container')
                const {id, src} = this.list[index]
                const current = document.getElementById(id)
                const pages = container.children
                for (let i = 0; i < pages.length; i++){
                    pages[i].style.visibility = 'hidden'
                }
                if (current) {
                    current.style.visibility = 'visible'
                } else {
                    const current = document.createElement('iframe')
                    current.id = id
                    current.src = src
                    container.append(current)
                }
            }
        },
        mounted() {
            this.change(0)
        }
    })
</script>
</body>
</html>
